<template>
  <div class=" page">
   

    <div class="py_default">
      <Card title="header">
        <div class="p_default grid column_3 divider_vertical">
          <StatSheet class="grid-item" title="有卡痕人数" :count="150" :history="20"> </StatSheet>
          <StatSheet class="grid-item" title="有卡痕人数" :count="150" :history="20"> </StatSheet>
          <StatSheet class="grid-item" title="有卡痕人数" :count="150" :history="20"> </StatSheet>
        </div>
         
      </Card>
      <div class="card">
        <div class="card-header">header</div>
        <div class="card-body">
          <div class="stat-sheet">
            <p class="stat-title">有卡痕人数</p>
            <p class="stat-count">140 <small class="small">人</small></p>
            <p class="stat-history">昨日人数： 40</p>
          </div>
        </div>
        <div class="card-footer">footer</div>
      </div>
    </div>
    <div class="row card card-bg_2 t_center section pitch_sm last-pitch_clear">
      <p class="heading row">PPD注射总人数</p>
      <div class="row sub-card grid column_3 divider_vertical">
        <div class="grid-item">
          <p>0人</p>
          <p>感染人数</p>
        </div>
        <div class="grid-item">
          <p>0人</p>
          <p>未感染人数</p>
        </div>
        <div class="grid-item">
          <p>0人</p>
          <p>其中有水泡人数</p>
        </div>
      </div>
    </div>

    <div class="row card card-bg_3 t_center section pitch_sm last-pitch_clear">
      <p class="heading row">DR筛查总人数</p>

      <div class="row sub-card grid column_2 divider_vertical">
        <div class="grid-item">
          <p>0人</p>
          <p>疑似结核人数</p>
        </div>
        <div class="grid-item">
          <p>0人</p>
          <p>无异常人数</p>
        </div>
      </div>
    </div>

    <div class="row card card-bg_4 t_center section pitch_sm last-pitch_clear">
      <p class="heading row">CT筛查总人数</p>
      <div class="row sub-card grid column_2 divider_vertical">
        <div class="grid-item">
          <p>0人</p>
          <p>疑似结核病人数</p>
        </div>
        <div class="grid-item">
          <p>0人</p>
          <p>无异常人数</p>
        </div>
      </div>
    </div>

    <div class="row card card-bg_4 t_center section pitch_sm last-pitch_clear">
      <p class="heading row">实验室化验总人数</p>
      <div class="row sub-card grid column_3 divider_vertical">
        <div class="grid-item">
          <p>0人</p>
          <p>痰涂片阳性人数</p>
        </div>
        <div class="grid-item">
          <p>0人</p>
          <p>痰培养阳性人数</p>
        </div>
        <div class="grid-item">
          <p>0人</p>
          <p>药敏耐药人数</p>
        </div>
      </div>
      <div class="row sub-card grid column_2 divider_vertical">
        <div class="grid-item">
          <p>0人</p>
          <p>分子生物学阳性人数</p>
        </div>
        <div class="grid-item">
          <p>0人</p>
          <p>潜伏感染人数</p>
        </div>
      </div>
    </div>

    <div class="row card card-bg_4 t_center section pitch_sm last-pitch_clear">
      <p class="heading row">诊断总人数</p>
      <div class="row sub-card grid column_2 divider_vertical">
        <div class="grid-item">
          <p>0人</p>
          <p>网报人数</p>
        </div>
        <div class="grid-item">
          <p>0人</p>
          <p>病原学阳性人数</p>
        </div>
      </div>
    </div>

    <div class="row card card-bg_4 t_center section pitch_sm last-pitch_clear">
      <p class="heading row">CT筛查总人数</p>
      <div class="row sub-card grid column_3 divider_vertical">
        <div class="grid-item">
          <p>0人</p>
          <p>有卡痕人数</p>
        </div>
        <div class="grid-item">
          <p>0人</p>
          <p>有卡痕人数</p>
        </div>
        <div class="grid-item">
          <p>0人</p>
          <p>有卡痕人数</p>
        </div>
      </div>
    </div>

    <!-- ----------------- -->
    <h1>提交诊断结果</h1>
    <div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <Select
            label="诊断结果"
            is-link
            readonly
            input-align="right"
            placeholder="请选择诊断结果"
          ></Select>
          <Select
            label="治疗方案"
            is-link
            readonly
            input-align="right"
            placeholder="请选择治疗方案"
          ></Select>
          <Select
            label="是否网报"
            is-link
            readonly
            input-align="right"
            placeholder="请选择是否网报"
          ></Select>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button block type="primary" native-type="submit">
            保存
          </van-button>
        </div>
      </van-form>

      <van-tabs>
        <van-tab title="体检单">体检单界面</van-tab>
        <van-tab title="CT">CT界面</van-tab>
        <van-tab title="DR">DR界面</van-tab>
        <van-tab title="实验室">实验室界面</van-tab>
        <van-tab title="心电图">心电图界面</van-tab>
      </van-tabs>
    </div>
    <!-- ----------------- -->
    <h1>提交结果</h1>
    <div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <Select
            label="痰涂片"
            is-link
            readonly
            input-align="right"
            placeholder="请选择痰涂片"
          ></Select>
          <Select
            label="分子生物学"
            is-link
            readonly
            input-align="right"
            placeholder="请选择分子生物学"
          ></Select>
          <Select
            label="痰培养"
            is-link
            readonly
            input-align="right"
            placeholder="请选择痰培养"
          ></Select>
          <Select
            label="结核分枝杆菌潜伏感染"
            is-link
            readonly
            input-align="right"
            placeholder="请选择结核分枝杆菌潜伏感染"
          ></Select>
          <Select
            label="药敏"
            is-link
            readonly
            input-align="right"
            placeholder="请选择药敏"
          ></Select>
          <van-field name="uploader" label="痰涂片">
            <template #input>
              <van-uploader v-model="value" max-count="1" />
            </template>
          </van-field>
          <van-field name="uploader" label="分子生物学">
            <template #input>
              <van-uploader v-model="value" max-count="1" />
            </template>
          </van-field>
          <van-field name="uploader" label="痰培养">
            <template #input>
              <van-uploader v-model="value" max-count="1" />
            </template>
          </van-field>
          <van-field name="uploader" label="结核分枝杆菌潜伏感染">
            <template #input>
              <van-uploader v-model="value" max-count="1" />
            </template>
          </van-field>
          <van-field name="uploader" label="药敏">
            <template #input>
              <van-uploader v-model="value" max-count="1" />
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button block type="primary" native-type="submit">
            保存
          </van-button>
        </div>
      </van-form>
    </div>
    <!-- ----------------- -->
    <h1>新增患者</h1>
    <div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            input-align="right"
            v-model="name"
            name="姓名"
            label="姓名"
            placeholder="姓名"
            :rules="[{ required: true, message: '请您填写姓名' }]"
          />
          <van-field
            input-align="right"
            v-model="password"
            name="身份证号"
            label="身份证号"
            placeholder="身份证号"
            :rules="[{ required: true, message: '请您填写身份证号' }]"
          />
          <van-field
            input-align="right"
            v-model="username"
            name="电话"
            label="电话"
            placeholder="电话"
            :rules="[{ required: true, message: '请您填写电话' }]"
          />
          <Select
            label="省级地区"
            is-link
            readonly
            input-align="right"
            placeholder="请选择省级地区"
          ></Select>
          <Select
            label="市级地区"
            is-link
            readonly
            input-align="right"
            placeholder="请选择市级地区"
          ></Select>
          <Select
            label="县级地区"
            is-link
            readonly
            input-align="right"
            placeholder="请选择县级地区"
          ></Select>

          <Select
            label="乡镇地区"
            is-link
            readonly
            input-align="right"
            placeholder="请选择乡镇地区"
          ></Select>

          <van-field
            input-align="right"
            v-model="username"
            name="户籍地址"
            label="户籍地址"
            placeholder="户籍地址"
            :rules="[{ required: true, message: '请您填写户籍地址' }]"
          />
          <Select
            label="省级地区"
            is-link
            readonly
            input-align="right"
            placeholder="请选择省级地区"
          ></Select>
          <Select
            label="市级地区"
            is-link
            readonly
            input-align="right"
            placeholder="请选择市级地区"
          ></Select>
          <Select
            label="县级地区"
            is-link
            readonly
            input-align="right"
            placeholder="请选择县级地区"
          ></Select>

          <Select
            label="乡镇地区"
            is-link
            readonly
            input-align="right"
            placeholder="请选择乡镇地区"
          ></Select>

          <van-field
            input-align="right"
            v-model="username"
            label="现住地址"
            placeholder="现住地址"
            :rules="[{ required: true, message: '请您填写现住地址' }]"
          />
          <Select
            label="名族"
            is-link
            readonly
            input-align="right"
            placeholder="请选择名族"
          ></Select>
          <van-field name="checkboxGroup" label="人群">
            <template #input>
              <van-checkbox-group direction="horizontal">
                <van-checkbox name="1" shape="square">密切接触者</van-checkbox>
                <van-checkbox name="2" shape="square">学生</van-checkbox>
                <van-checkbox name="3" shape="square">教职工</van-checkbox>
                <van-checkbox name="4" shape="square">僧尼</van-checkbox>
                <van-checkbox name="5" shape="square">老年人</van-checkbox>
                <van-checkbox name="6" shape="square">糖尿病患者</van-checkbox>
                <van-checkbox name="7" shape="square"
                  >既往结核病患者</van-checkbox
                >
                <van-checkbox name="8" shape="square">非重点人群</van-checkbox>
              </van-checkbox-group>
            </template>
          </van-field>
          <van-field
            v-model="username"
            label="备注"
            placeholder="备注"
            :rules="[{ required: true, message: '请填写备注' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button block type="primary" native-type="submit">
            保存
          </van-button>
        </div>
      </van-form>
    </div>
    <!-- ----------------- -->
    <h1>修改症状</h1>
    <div>
      <van-form>
        <Select
          label="咳嗽、咳痰（超过1周）"
          v-model="address"
          is-link
          readonly
          input-align="right"
          placeholder="请您选择"
          :columns="columns"
        ></Select>
        <Select
          label="咯血或血痰"
          v-model="address"
          is-link
          readonly
          input-align="right"
          placeholder="请您选择"
          :columns="columns"
        ></Select>
        <Select
          label="发热"
          v-model="address"
          is-link
          readonly
          input-align="right"
          placeholder="请您选择"
          :columns="columns"
        ></Select>
        <Select
          label="胸痛"
          v-model="address"
          is-link
          readonly
          input-align="right"
          placeholder="请您选择"
          :columns="columns"
        ></Select>
        <Select
          label="夜间盗汗"
          is-link
          readonly
          input-align="right"
          placeholder="请您选择"
        ></Select>
        <Select
          label="食欲不振"
          is-link
          readonly
          input-align="right"
          placeholder="请您选择"
        ></Select>
        <Select
          label="乏力"
          is-link
          readonly
          input-align="right"
          placeholder="请您选择"
        ></Select>
        <Select
          label="体重减轻（超过6斤）"
          is-link
          readonly
          input-align="right"
          placeholder="请您选择"
        ></Select>
        <Select
          label="查验卡痕"
          is-link
          readonly
          input-align="right"
          placeholder="请您选择"
        ></Select>
        <van-field
          label="医生签字"
          input-align="right"
          placeholder="请填写姓名"
        />
        <van-field name="uploader" label="个人图像">
          <template #input>
            <van-uploader v-model="value" max-count="1" />
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button block type="primary" native-type="submit">
            保存
          </van-button>
        </div>
      </van-form>
    </div>
    <!-- ----------------- -->
    <div>
      <div class="section pitch_sm last-pitch_clear t_center">
        <p class="row">二维码</p>
        <div class="row">
          <van-image
            width="100"
            height="100"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
        </div>
        <p class="row justify_between">
          <span>王立志</span>
          <span>男</span>
          <span>20岁</span>
          <span>620423190012019999</span>
        </p>

        <van-field
          class="row p_unset"
          name="stepper"
          label="步进器"
          input-align="right"
        >
          <template #input>
            <van-stepper v-model="value" />
          </template>
        </van-field>
      </div>

      <van-button type="primary" block>块级元素</van-button>
    </div>
    <!-- ----------------- -->
    <div>
      <van-form>
        <van-cell-group inset class="grid column_2">
          <van-field
            class="grid-item"
            is-link
            readonly
            name="picker"
            placeholder="请您选择省"
          />
          <van-field
            class="grid-item"
            is-link
            readonly
            name="picker"
            placeholder="请您选择市"
          />
          <van-field
            class="grid-item"
            is-link
            readonly
            name="picker"
            placeholder="请您选择县"
          />
          <van-field
            class="grid-item"
            is-link
            readonly
            name="picker"
            placeholder="请您选择地区"
          />

          <van-field
            class="grid-item"
            is-link
            readonly
            name="picker"
            placeholder="请您选择起始时间"
          />

          <van-field
            class="grid-item"
            is-link
            readonly
            name="picker"
            placeholder="请您选择结束时间"
          />
        </van-cell-group>
      </van-form>
      <div class="section pitch_sm last-pitch_clear">
        <div
          class="row card card-bg_1 t_center section pitch_sm last-pitch_clear"
        >
          <p class="heading row">采集人数</p>
          <div class="row sub-card grid column_3 divider_vertical">
            <div class="grid-item">
              <p>0人</p>
              <p>有卡痕人数</p>
            </div>
            <div class="grid-item">
              <p>0人</p>
              <p>无卡痕人数</p>
            </div>
            <div class="grid-item">
              <p>0人</p>
              <p>无症状人数</p>
            </div>
          </div>
          <div class="row sub-card grid column_2 divider_vertical">
            <div class="grid-item">
              <p>0人</p>
              <p>新增人数</p>
            </div>
            <div class="grid-item">
              <p>0人</p>
              <p>有症状人数</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import Select from '@/components/common/select.tsx';
import { Card, StatSheet } from '@/components/common/index';

import { Icon } from 'vant';
export default defineComponent({
  name: 'Center',
  components: {
    Select,
    Card,
    StatSheet,
    Icon,
  },
  setup() {
    const columns = [
      { text: '杭州', value: 'Hangzh' },
      { text: '宁波', value: 'Ningbo' },
      { text: '温州', value: 'Wenzhou' },
      { text: '绍兴', value: 'Shaoxing' },
      { text: '湖州', value: 'Huzhou' },
    ];
    const address = ref('Hangzhou');
    return { columns, address };
  },
});
</script>

<style lang="scss">
.page {
  background: #eeeeee;
}
</style>

